<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="{{cdn}}/highlight.js/11.10.0/styles/default.min.css" rel="stylesheet" />
  <link rel="stylesheet/less" type="text/css" href="./public/style/index.less" />
  <title>Document</title>
</head>

<body>
  <div class="app">
    <div class="app-cfg">
      <div class="title">Redis配置项</div>
      <pre><code class="language-js">...</code></pre>
    </div>

    <div class="redis-event">
      <div class="title">Redis事件监听</div>
      <div class="tips">注意采取的非ws，而是sse方式监听</div>
      <div class="msg"></div>
    </div>
  </div>
  <script src="{{cdn}}/axios/1.7.4/axios.js"></script>
  <script src="{{cdn}}/less.js/4.2.0/less.min.js"></script>
  <script src="{{cdn}}/highlight.js/11.10.0/highlight.min.js"></script>
  <script>
    axios.get("/app-cfg", { params: { id: "redis" } }).then(({ data }) => {
      const codeEl = document.querySelector("code");
      codeEl.innerHTML = JSON.stringify(data, null, 2);
      hljs.highlightAll();
    });


    const event = new EventSource("/redis");
    event.addEventListener("open", (e) => console.log("open:", e));
    event.addEventListener("message", (e) => {
      const msgEl = document.querySelector('.msg');
      msgEl.innerHTML = e.data;
    });
  </script>
</body>

</html>